<template>
  <div class="w-page w-donate">
    <div class="w-head">
      <img src="../assets/img/second/bg.png" alt="">
    </div>
    <div class="w-conbox">
      <div class="w-con">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <van-cell v-for="(item,index) in list" :key="index">
            <div class="w-item flex vc hb">
              <div class="w-right flex hb column">
                <div class="w-title">
                  <p class="w-text flex hb vc">
                    <span>{{item.name}}</span>
                    <span>{{item.donate}}元</span>
                  </p>
                  <p class="w-class flex hb vc">
                    <span>{{item.projectTitle}}</span>
                    <span>{{item.objective}}元</span>
                  </p>
                </div>
              </div>
            </div>
          </van-cell>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>

import { donateList } from '@/api/donate'
import {
  List,
  Field
} from 'vant'

export default {
  components: {
    [List.name]: List,
    [Field.name]: Field
  },
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      value: '',
      page: 1
    }
  },
  methods: {
    onLoad () {
      donateList({ page: this.page }).then(response => {
        this.list = response.data.list
        this.page += 1
        this.finished = response.data.isLastPage
      })
    }
  }
}
</script>
<style>
  .w-donate .w-conbox .van-cell {
    padding-top: 10px;
    padding-bottom: 6px;
    background-color: rgba(255, 255, 255, 0);
  }

  .w-donate .w-conbox .van-cell:not(:last-child)::after {
    border-bottom: 1px solid #bba576;
  }

  .w-donate .w-inptbox .van-cell {
    padding-top: 6px;
    padding-bottom: 6px;
  }
</style>
<style scoped>
  .w-page {
    height: 100vh;
    width: 100vw;
    background: #E1E0DF;
    position: relative;
  }

  .w-head {
    width: 100vw;
  }

  .w-head img {
    width: 100%;
  }

  .w-conbox {
    width: 96vw;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    background: #B29C6D;
    padding: 12px;
    position: absolute;
    top: 30vw;
    left: 2vw;
  }

  .w-con {
    height: calc(100vh - 43vw);
    overflow: scroll;
  }

  .w-item {
    display: block;
  }

  .w-title span {
    display: block;
  }

  .w-text {
    width: 100%;
    color: #fff;
    font-size: 18px;

  }

  .w-class {
    width: 100%;
    font-size: 14px;
    color: #E3D5B6;
  }

  .w-inptbox {
    width: 37vw;
    position: absolute;
    border-radius: 20px;
    overflow: hidden;
    right: 20px;
    font-size: 13px;
    top: 16px;
  }
</style>
